<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <title>VRD后台管理页面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        body{
            font: 16px "Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontAwesome,sans-serif;
            color: #cfcfcf;
        }
        header>div>div{
            height: 50px;
        }
        header .col-md-3{
            background-color: #333;
        }
        header .col-md-9{
            background-color: #2f3638;
        }
        .panel-default{
            background-color: rgba(0,0,0,0);
            border: 0;
        }
        .panel-default>.panel-heading{
            background-color: rgba(0,0,0,0);
            color: #eee;
        }
        .panel-heading{
            padding-left: 50px;
        }
        #accordion a{
            color: #cfcfcf;
        }
        #accordion a:hover{
            color: white;

        }
        /*属性选择器:匹配到包含此属性的元素*/
        /*VUE加载出来之前让元素隐藏, 当VUE加载完之后VUE框架会将页面中所有
        元素的v-cloak属性去掉, 这样元素就再次显示出来 */
        [v-cloak]{
            display: none;/*让元素隐藏*/
        }

    </style>

</head>
<body>
<header>
    <div class="row" >
        <div class="col-md-3">
            <a href="/static/index.html">
                <img style="margin:5px 10px" src="http://www.vrd.net.cn/vrd/images/logo.png" alt="">
            </a>
        </div>
        <div class="col-md-9">
             <span class="pull-right" style="position: relative;top: 13px;right: 20px">
                 <span v-cloak>{{user.username}},欢迎你!</span>
                 <a href="#" @click="logout()">退出登录</a>
             </span>
        </div>
    </div>
</header>
<section>
    <div class="row" >
        <div class="col-md-3 col-xs-3" style="padding: 50px;background-color: #282d2f;height: 1000px">

            <div class="panel-group" id="accordion" style="margin-top: 50px">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title" >
                            <a class="fa fa-user-circle-o" data-toggle="collapse" data-parent="#accordion"
                               href="#collapseOne">
                                分类管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul style="list-style-type: none">
                                <li><a href="/static/admin.html">分类列表</a></li>
                                <li><a href="#" @click="add()">添加分类</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="fa fa-institution" data-toggle="collapse" data-parent="#accordion"
                               href="#collapseTwo">
                                作品管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <ul style="list-style-type: none">
                                <li><a href="/admin-product.html">作品列表</a></li>
                                <li><a href="/send.html">发布作品</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="fa fa-photo" data-toggle="collapse" data-parent="#accordion"
                               href="#collapseThree">
                                轮播图管理
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <ul style="list-style-type: none">
                                <li><a href="">轮播图列表</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-md-9 col-xs-9" style="background-color: #3a4144;height: 1000px">
            <h4 class="page-header">欢迎访问VRD后台管理系统</h4>

            <table border="1" width="70%" style="text-align: center">
                <caption>轮播图列表</caption>
                <tr >
                    <th>id</th>
                    <th>轮播图</th>
                    <th>操作</th>
                </tr>
                <tr v-for="b in b_arr">
                    <td>{{b.id}}</td>
                    <td><img :src="b.url" width="150"></td>
                    <td><a href="#" @click="del(b.id)">删除</a></td>
                </tr>
            </table>
            <h3>发布轮播图</h3>
            <hr>
            <form action="" enctype="multipart/form-data">
                <input type="file" name="pic">
                <input type="button" value="开始上传" @click="upload()">
            </form>
        </div>
    </div>
</section>


<!--引入jQuery框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--引入axios框架-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--引入Vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v = new Vue({
        el:"header",
        data:{
            user:{}
        },
        created:function () {
            //发请求获取当前登录的用户对象
            axios.get("/currentUser").then(function (response) {
                //判断是否得到了用户信息 null->""
                if (response.data==""){//代表没登录过
                    alert("请先登录!")
                    location.href="/login.html";
                    return;
                }
                v.user = response.data;//把查询到的用户给到Vue的变量
            })
        },
        methods: {
            logout:function () {
                if (!confirm("您确认退出登录吗?")){
                    return;
                }
                //发出退出登录的请求
                axios.get("/logout").then(function (response) {
                    //显示首页
                    location.href="/";
                })
            }
        }
    })

    //创建Vue对象负责管理section区域的显示
    let section_v = new Vue({
        el:"section",
        data:{
            b_arr:[]
        },
        created:function () {
            //请求所有分类信息
            axios.get("/banner/select").then(function (response) {
                section_v.b_arr = response.data;
            })
        },
        methods:{
            add:function () {
                let name = prompt("请输入分类名称");
                if (name==null||name==""){
                    return;
                }
                //发请求 把参数写在请求地址后面
                axios.get("/category/insert?name="+name).then(function (response) {
                    alert("添加成功!");
                    location.reload();//刷新页面
                })
            },
            del:function (id) {
                if (!confirm("您确认删除吗?")){
                    return;
                }
                //发请求删除
                axios.get("/banner/delete?id="+id).then(function (response) {
                    location.reload();//刷新页面
                })
            },
            upload:function () {
                //得到form表单中的数据
                let data = new FormData(document.querySelector("form"));
                //判断是否选择了文件
                if (data.get("pic").name==""){
                    alert("请选择上传的图片文件!")
                    return;
                }

                //发请求
                axios.post("/banner/insert",data).then(function (response) {
                    location.reload();//刷新页面
                });
            }
        }
    })
</script>
</body>
</html>